<!DOCTYPE html>
<html ng-app="codeEditorApp">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ace.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-ace/0.2.3/ui-ace.min.js"></script>
</head>
<body>
    <div ng-controller="EditorController">
        <code-editor paragraph-id="paragraph.id" paragraph-context="paragraph"
                     dirty-text="dirtyText" original-text="originalText" on-load="aceLoaded"
                     revision-view="revisionView" ng-click="onEditorClick()"></code-editor>
    </div>

    <script>
        angular.module('codeEditorApp', ['ui.ace'])
            .controller('EditorController', function ($scope) {
                $scope.paragraph = {id: 1, text: 'Hello World'};
                $scope.dirtyText = 'Hello World';
                $scope.originalText = 'Hello World';
                $scope.revisionView = false;
                $scope.aceLoaded = function () {
                    console.log('Editor Loaded');
                };
                $scope.onEditorClick = function () {
                    console.log('Editor Clicked');
                };
            })
            .directive('codeEditor', function () {
                return {
                    restrict: 'E',
                    template: '<div ui-ace="aceOptions" ng-model="paragraph.text"></div>',
                    scope: {
                        paragraphId: '=',
                        paragraphContext: '=',
                        dirtyText: '=',
                        originalText: '=',
                        onLoad: '&',
                        revisionView: '='
                    },
                    link: function (scope, element, attrs) {
                        scope.aceOptions = {
                            onLoad: function (_ace) {
                                scope.$apply(function () {
                                    scope.onLoad();
                                });
                            },
                            mode: 'text',
                            theme: 'chrome'
                        };
                    }
                };
            });
    </script>
</body>
</html>
